<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"	+ request.getServerName() + ":" + request.getServerPort()	+ path + "/";
    request.setAttribute("basePath",basePath);
%>
<!DOCTYPE html>
<html lang="en">
<head>
<jsp:include page="../common/adminContentHead.jsp" />
<link href="${pageContext.request.contextPath}/css/zTreeStyle/metroStyle/metroStyle.css?v=<%=getServletContext().getAttribute("version") %>" rel="stylesheet">
<title>IM</title>
<style>
.list-group-item {
	padding: 5px 5px;
}

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus
	{
	z-index: 2;
	color: #131212;
	background-color: #ffffff;
	border-color: #f5f5f5;
}

.file {
	position: relative;
	display: inline-block;
	background: #D0EEFF;
	border: 1px solid #99D3F5;
	border-radius: 4px;
	padding: 4px 12px;
	overflow: hidden;
	color: #1E88C7;
	text-decoration: none;
	text-indent: 0;
	line-height: 20px;
}

.file input {
	position: absolute;
	font-size: 100px;
	right: 0;
	top: 0;
	opacity: 0;
}

.file:hover {
	background: #AADFFD;
	border-color: #78C3F3;
	color: #004974;
	text-decoration: none;
}

.me {
	display: block;
	text-align: right;
	padding-right: 10px;
	background: rgba(169, 169, 169, 0.18);
}

.other {
	display: block;
	padding-left: 10px;
	background: rgba(165, 165, 165, 0.11);
}

.content {
	width: 518px;
	height: 140px;
	margin-bottom: -5px;
}

.tip {
	float: right;
	color: red;
	padding-right:30px;
}
</style>
</head>    
<body>   
<div class="row">
	<div class="col-md-3">
		<div class="panel panel-default">
				<div class="panel-heading">我的好友</div>
				<div class="panel-body hfit" style="height: 600px;overflow-y: auto;">
					<div class="list-group" id="div_rolelist_fqj">
						<c:forEach items="${friends}" var="u">
							<p class="list-group-item" uid="${u.id}">${u.name}<span class="tip"></span></p>
						</c:forEach>
					</div>
				</div>
		</div>
		
	</div>
</div>
<div id="addArea" class="panel panel-default" style="padding: 10px 30px;border: none;display: none;">
		<div style="border: 1px solid #a9a9a9;" id="show">
			<div id="showChatMessage" style="height:340px; overflow-y: auto;">
			</div>
			<textarea  class="content"  placeholder="内容" ></textarea>
			<input type="hidden" id="tos">
		</div>
	</div>
<script src="${pageContext.request.contextPath}/sb-admin-2-1.0.8/bower_components/jquery/dist/jquery.min.js?v=<%=getServletContext().getAttribute("version") %>"></script>
     
<script type="text/javascript">
	var url="${basePath}";
	url=url.replace("http","ws")+'/webSocket';
    var ws = new WebSocket(url);
    /* 
     *监听三种状态的变化 。js会回调
     */
    ws.onopen = function(message) {

    };
    ws.onclose = function(message) {

    };
    ws.onmessage = function(message) {
    	var content=JSON.parse(message.data)
        showMessage(content);
    };
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
	window.onbeforeunload = function() {
        ws.close();
    };
    //关闭连接
    function closeWebSocket() {
        ws.close();
    }
    
    //发送消息
    function send(msg,to) {
    	var meaage=new Object();
        meaage.content=msg;
        meaage.to=to
        ws.send(JSON.stringify(meaage));
    }
    
    function showMessage(mes) {
    	var fromId=mes.fromId;
    	if($('#tos').val()!=fromId){
    		var span=$('[uid='+fromId+'] .tip');
    		var num=span.text();
    		var mesArr;
    		if(!num){
    			num=1;
    			mesArr=new Array();
    		}else{
    			num=parseInt(num)+1;
    			mesArr=span.data('mes');
    		}
    		mesArr.push(mes);
    		span.text(num);
    		span.data('mes',mesArr);
    	}else{
	    	var content='<span class="other">'+mes.from+':&nbsp;&nbsp; '+mes.content+'</span>'
	        $('#showChatMessage').append(content);
    	}
    }
    
    $('.list-group-item').click(function(){
    	$('#showChatMessage').html('');
    	var tos=$(this).attr('uid');
    	var text='与 '+$(this).text()+' 聊天中';
    	$('#tos').val(tos);
    	var num=$(this).find('span').text();
    	if(num){
    		var mesArr =$(this).find('span').data('mes');
    		var content='';
    		$.each(mesArr,function(i,mes){
	    		content+='<span class="other">'+mes.from+':&nbsp;&nbsp; '+mes.content+'</span>'
    		});
	        $('#showChatMessage').append(content);
	        $(this).find('span').text('');
	        $(this).find('span').data('mes',null);
    	}
    	layer.open({
		      type: 1,
		     title: text,
		      area: ['580px', '500px'],
		   content: $('#addArea'),
		   end: function () {
			   $('#tos').val('');
           }
		  });
    });
     
    $('.content').keyup(function(){
        if(event.keyCode == 13){
        	var content=$.trim($(this).val());
        	var tos=$('#tos').val();
        	if(content && tos){
	        	send(content,tos);
	        	var content='<span class="me" >'+content+'&nbsp;&nbsp;:我</span>';
	        	$(this).val('');
	        	$('#showChatMessage').append(content);
        	}
        }
    });
    
</script>
</body>
</html>